<template>
<view class="common-terms-wrap">
    <scroll-view scroll-y class="common-terms">
			<view
				class="common-terms-item u-border-bottom"
				v-for="item in commonTermsList"
				:key="item.id"
				@click="onClick(item.commonLanguage)"
			>
				<view class="content" :class="item.show? '': 'u-line-1'">{{item.commonLanguage}}</view>
				<view class="show" v-if="!item.show" @click.stop="handleShow(item)">展开</view>
			</view>
			<view v-if="!commonTermsList.length" class="common-terms-empty">
				<Empty :baseImg="emptyImg" label="使用常用语，秒回消息，给对方留下一个好印象" />
			</view>
    </scroll-view>
		<view class="u-text-center  u-p-t-12 u-p-b-12" >
			<view v-if="commonTermsList.length" @click="toCommenTerms" class="add-text"> <text class="icon icon-edit"></text> 管理</view>
			<view v-else @click="add" class="btn btn-primary">增添常用语</view>
		</view>
</view>
</template>

<script>
import { commonTermsList } from '@/api/modules/message';
import Empty from '@/components/Empty';

export default {
	props: {
		loginStatus: String,
	},
	components: {
		Empty,
	},
	data() {
		return {
      personId: uni.getStorageSync("person-id").slice(2) || '',
      commonTermsList: [],
			emptyImg: this.$imgBaseSelf + 'message/empty_common.png',
		}
	},
	mounted() {
		this.getData();

		this.$bus.$on('updataCommonTerms', this.getData);
	},
	beforeDestroy() {
		this.$bus.$off('updataCommonTerms');
	},
	methods: {
		getData() {
			const params = {
				personId: this.personId,
				type: this.loginStatus == 'person'? 1: 2,
			};
			commonTermsList(params).then(res => {
				if(res.code == 200) {
					this.commonTermsList = res.data.map(item => {
						if(item.commonLanguage.length > 32) {
							item.show = false;
						} else {
							item.show = true;
						}
						return item;
					});
				} else {
					uni.showToast({
						title: res.status_desc,
						icon: 'none',
            duration: 1000
					});
				}
			});
		},
		onClick(item) {
			this.$emit('itemClick', item);
		},
		toCommenTerms() {
			uni.navigateTo({
				url: '/pagesSub/message/commonTerms/index',
			});
		},
		add() {
			uni.navigateTo({
				url: '/pagesSub/message/commonTerms/edit',
			});
		},
		handleShow(item) {
			this.commonTermsList.forEach(ele => {
				if(ele.id == item.id) {
					ele.show = true;
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.common-terms-wrap {
	padding: 0 32rpx;
}
.common-terms-empty {
	padding-top: 60rpx;
}
.common-terms {
	box-sizing: border-box;
	height: 372rpx;

	&-item {
		display: flex;
		justify-content: space-between;
		padding: 36rpx 0;
		font-size: 24rpx;
		color: #333;
	}

	.show {
		flex-shrink: 0;
		margin-left: 30rpx;
		color: $u-type-primary;
	}
}
.add-text {
	font-size: 24rpx;
}
.icon-edit {
	width: 36rpx;
	height: 36rpx;
	background-image: url($img-base + 'message/edit_new.png');
	background-size: 100% 100%;
}
</style>